<template>
  <div class="index-top">
    <div class="top-input">
      <slot name="search_input"></slot>
      <div class="input_div" @click="goToSearch">
          <img src="/static/img/search_icon.png">
          <div>搜索关键词</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'one-search',
  data () {
    return {
    };
  },
  props: {
    value: {
      type: Number
    }
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    goToSearch() {
      this.$router.push({ 'path': 'index/search' });
    }
  }
};
</script>
<style scoped lang="less">
.index-top{
  width:100%;
  height:110px;
  display: flex;
  flex-wrap:nowrap;
  align-items: center;
  .top-input{
    margin:0 auto;
    width:80%;
    height:100%;
    display: flex;
    align-items: center;
    flex-wrap:wrap;
    .article_p{
      width:100%;
      height:45%;
      display:flex;
      align-items: center;
      color:#FF733E;
      font-size: 16px;
    }
    .input_div{
        width:100%;
        height:55%;
        position: relative;
      div{
        line-height: 61px;
        width:100%;
        height:100%;
        padding-left:60px;
        border-radius: 50px;
        background: #F4F4F4;
        border:none;
        color:#BABABA;
      }
      img{
        position: absolute;
        left:20px;
        width:30px;
        top:50%;
        transform: translate(0,-50%);
      }
    }
  }
}
</style>
